<template>
  <div
    class="x-share"
    @click="onClose"
  >
    <div
      v-if="isWechat()"
      class="tip-con"
    >
      <!-- <p class="flex justify-center">
        <svg-icon name="share-text" class="text" />
      </p> -->
      <img
        class="share-img"
        src="@/assets/images/share.png"
        alt=""
      />
      <button @click.stop="onClose">我知道了</button>
      <!-- <svg-icon name="share-point" class="point" /> -->
      <!-- <img class="share-img" src="@/assets/images/share.png" alt=""> -->
    </div>
    <div v-else>
      <div class="flc mt-100px">
        <img
          src="@/assets/images/h5-share.png"
          class="w-9/10 "
        />
      </div>
      <div class="text-white text-13px mt-40px text-center">
        长按保存图片，邀请好友一起体验吧~
      </div>
    </div>
    <!-- <poster-base-view /> -->
  </div>
</template>

<script
  lang="ts"
  setup
  name="XShare"
>

import { useTtsaStore } from '@/store/ttsa'
import { isWechat } from '@/utils/client'

const emit = defineEmits(['unmount'])

const onClose = () => {
  const ttsa = useTtsaStore()
  ttsa.goon()
  emit('unmount')
}

</script>

<style
  scoped
  lang="scss"
>
.x-share {
  @apply fixed backdrop-filter backdrop-blur-5 top-0 left-0 right-0 bottom-0 z-10086 text-white;
  background-color: rgba(0, 0, 0, 0.2);

  .tip-con {
    margin-top: 4px;
    margin-bottom: 50px;
    text-align: center;

    .text {
      width: 225px;
      height: 31px;
    }

    button {
      width: 91px;
      height: 31px;
      border-radius: 6px;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      margin-top: 20px;

      &:active {
        opacity: 0.6;
      }
    }

    .point {
      @apply absolute;
      width: 62px;
      height: 55px;
      right: 25px;
      top: 16px;
    }

    .share-img {
      width: 300px;
      margin-left: calc(100vw - 320px);
    }
  }
}
</style>
